<template>
	<div class="clearfix selector">
		<div class="type-wrap logo">
			<div class="fl key brand">品牌</div>
			<div class="value logos">
				<ul class="logo-list">
					<li v-for="value in dataListObj.trademarkList" :key="value.tmId" @click="getTrademark(value)">
						<a>{{ value.tmName }}</a>
					</li>
				</ul>
			</div>
			<div class="ext">
				<a href="javascript:void(0);" class="sui-btn">多选</a>
				<a href="javascript:void(0);">更多</a>
			</div>
		</div>
		<div class="type-wrap" v-for="value in dataListObj.attrsList" :key="value.attrId">
			<div class="fl key">{{ value.attrName }}</div>
			<div class="fl value">
				<ul class="type-list">
					<li v-for="(item, index) in value.attrValueList" :key="index" @click="getAttrInfo(value, item)">
						<a>{{ item }}</a>
					</li>
				</ul>
			</div>
			<div class="fl ext"></div>
		</div>
	</div>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'AttrsList',
	computed: {
		...mapState('search', ['dataListObj']),
	},
	methods: {
		// 点击品牌传递数据给父组件 让父组件携带数据发起请求
		getTrademark(data) {
			this.$emit('trademark', data);
		},
		// 点击商品属性传递数据给父组件 让父组件携带数据发起请求
		getAttrInfo(value, item) {
			this.$emit('attrInfo', value, item);
		},
	},
};
</script>

<style scoped>
.main .py-container .selector {
	border: 1px solid #ddd;
	margin-bottom: 5px;
	overflow: hidden;
}
.main .py-container .selector .logo {
	border-top: 0;
	margin: 0;
	position: relative;
	overflow: hidden;
}
.main .py-container .selector .logo .key {
	padding-bottom: 87px !important;
}
.main .py-container .selector .type-wrap {
	margin: 0;
	position: relative;
	border-top: 1px solid #ddd;
	overflow: hidden;
}
.main .py-container .selector .type-wrap .key {
	width: 100px;
	background: #f1f1f1;
	line-height: 26px;
	text-align: right;
	padding: 10px 10px 0 15px;
	float: left;
}
.main .py-container .selector .type-wrap .value {
	overflow: hidden;
	padding: 10px 0 0 15px;
	color: #333;
	margin-left: 120px;
	padding-right: 90px;
}
.main .py-container .selector .type-wrap .value .logo-list li {
	float: left;
	border: 1px solid #e4e4e4;
	margin: -1px -1px 0 0;
	width: 105px;
	height: 52px;
	text-align: center;
	line-height: 52px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
	font-style: italic;
	font-size: 14px;
}
.main .py-container .selector .type-wrap .value .logo-list li a {
	color: #e1251b;
}
.main .py-container .selector .type-wrap .value .logo-list li img {
	max-width: 100%;
	vertical-align: middle;
}
.main .py-container .selector .type-wrap .value .type-list li {
	float: left;
	display: block;
	margin-right: 30px;
	line-height: 26px;
}
.main .py-container .selector .type-wrap .value .type-list li a {
	text-decoration: none;
	color: #666;
}
.main .py-container .selector .type-wrap .ext {
	position: absolute;
	top: 10px;
	right: 10px;
}
.main .py-container .selector .type-wrap .ext .sui-btn {
	display: inline-block;
	padding: 2px 14px;
	box-sizing: border-box;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 18px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	padding: 0 10px;
	background: #fff;
	border: 1px solid #d5d5d5;
}
.main .py-container .selector .type-wrap .ext a {
	color: #666;
}
</style>
